<template>
  <div class="home">
    <h1>Home组件的内容</h1>
 

    <h2>getters属性的使用</h2>
    <h3>{{ $store.getters.getStu }}</h3>
    <h3>{{ $store.getters.getStuNumber }}</h3>
    <h3>{{ $store.getters.getStuAge(25) }}</h3>

    <h2>mutations属性的使用</h2>
    <h3>{{ $store.state.count }}</h3>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="arguement(5)">+5</button>
    <button @click="arguement(10)">+10</button>

    <h3>{{ $store.state.person }}</h3>
    <h3>{{ $store.state.students }}</h3>
    <button @click="change('小红')">点击修改信息</button>

    <h3>{{ $store.state.person }}</h3>
    <button  @click="change2('小红')">点击5秒之后修改姓名</button>

    <h3>{{ $store.state.person }}</h3>
    <button  @click="change3('小花')">点击5秒之后修改姓名(actions)</button>

    <h1>-----------------------------------------------</h1>
    <h1>modules里面的state</h1>
    <h3>{{ $store.state.one.user}}</h3>

    <h1>modules里面的getters</h1>
    <h3>{{ $store.getters.fullName}}</h3>
    <h3>{{ $store.getters.getStu2}}</h3>
    <h3>{{ $store.getters.fullName2}}</h3>

    <h1>modules里面的mutations</h1>
    <h3 @click="$store.commit('changeName3','李四')">{{$store.state.one.user}}</h3>

    <h1>modules里面的actions</h1>
    <h3 @click="$store.dispatch('act2_changeName','王五')">{{$store.state.one.user}}</h3>

    



    


    <h1>-----------------------------------------------</h1>
    <h1>About组件的内容</h1>
    <h2>{{ $store.state.count }}</h2>



  </div>
</template>

<script>
// @ is an alias to /src
import AboutView from './AboutView.vue';
import * as TYPE from "./../store/mutation-types"

export default {
  name: 'HomeView',
  data(){
    return{
      // count:10
    }
  },
  components:{
    AboutView
  },
  methods:{
    add(){
      // this.count++;
      // console.log(this.$store)
      // this.$store.state.count++;
      this.$store.commit(TYPE.INCREASE);
    },
    sub(){
      // this.count--;
      // this.$store.state.count--;
      this.$store.commit(TYPE.DECREASE);
    },
    arguement(num){
      // 1.普通提交风格
      // this.$store.commit("arguement",num)
      // 2.特殊提交风格
      this.$store.commit({
        type:TYPE.ARGUEMENT,
        num,
        test:123
      })

    },
    change(newName){
      this.$store.commit("changeName",newName)
    },
    change2(newName){
      this.$store.commit("changeName2",newName)

    },
    change3(newName){
      this.$store.dispatch("act_changeName",newName)
      .then(res=>{
        console.log(res);
      });
      console.log(this.$store)

    }
    
  }
}


</script>
